Skip to content

Conversation

@MINJI121
Copy link
Contributor

@MINJI121 MINJI121 commented May 22, 2025

🔗 이슈 번호

#186

📋 작업 사항

KakaoTalk_20250522_224530085

이슈

  • 기존 GradientScrollable은 단순히 부모 요소의 너비 기준으로 표시
  • 때문에 사진과 같이 실제 text overflow가 발생하지 않아도 너비 끝에 표시되는 문제 발생

해결

  • el.scrollWidth > el.clientWidth 비교를 통해 실제 overflow 여부 판단
  • overflow가 발생할 때만 그라디언트가 표시되도록 useState로 관리
  • ResizeObserver 도입해 브라우저 사이즈 변경 시에도 overflow 상태가 즉시 반영되도록 처리

📷 스크린샷

녹음 2025-05-22 230445
테스트 완료

@MINJI121 MINJI121 self-assigned this May 22, 2025
@MINJI121 MINJI121 added the ⚒️ refactor 코드 리팩토링 이슈 label May 22, 2025
@hyeonjiroh hyeonjiroh requested review from ARON-Y and jjanie00 May 22, 2025 14:07
@github-actions
Copy link

Preview Deployment
🔗 https://coworkers-gy9jtxgvi-hyeonjirohs-projects.vercel.app

@MINJI121 MINJI121 changed the title [refactor] team: 모바일 환경 스크롤 UX 개선 목적 GradientScrollable 반응형 리팩토링 [refactor] #186 모바일 환경 스크롤 UX 개선 목적 GradientScrollable 반응형 리팩토링 May 22, 2025

observer.observe(el);

return () => observer.disconnect();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

observer 해제 처리까지 잘 되있어서 안정성 면에서도 좋네요 ! 👍🏻 고생하셨습니다 민지님 ~!

Copy link
Contributor

@jjanie00 jjanie00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 민지님 !

Copy link
Contributor

@ARON-Y ARON-Y left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 민지님😆

@ARON-Y ARON-Y merged commit 4190d45 into dev May 22, 2025
2 checks passed
@ARON-Y ARON-Y deleted the feat/#120/team-page branch May 22, 2025 15:41
@MINJI121 MINJI121 changed the title [refactor] #186 모바일 환경 스크롤 UX 개선 목적 GradientScrollable 반응형 리팩토링 [refactor] #186 GradientScrollable: 모바일 환경 스크롤 UX 개선 목적 반응형 리팩토링 May 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

⚒️ refactor 코드 리팩토링 이슈

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[refactor] 팀 페이지 리팩토링: 모바일 overflow-text 그라데이션 처리, 탈퇴 기능 등

4 participants